@import "mycolor";
body{
	header{
		position: relative;
	a{
	  color: #b0b0b0;
	  font-size: 12px;
			&:hover{
				text-decoration: none;
				color:#eee;
			}
		}
		color: #b0b0b0;
		line-height: 40px;
		 
		.header{
			background: $xm-33;
			.container{ 
				max-width:1226px;
				>div{
					
					.breadcrumb{
						background: $xm-33;
						
						.breadcrumb-item + .breadcrumb-item::before{
							content:"|";
							color:#424242;
						}
						
						.shopping{
							a{
								background: $xm-orange url("../img/index/shop_car.png") no-repeat 15px 8px;
								color: #fff;
								&:hover{
									background: #fff url("../img/index/shop_car_h.png") no-repeat 15px 8px;
									color:$xm-orange;
								}
							}
						}
					}
				}
			}
		}
		.container{
			max-width:1226px;
			
			.navbar{
				position: inherit !important;
				.col-1{
					a{
						display: block;
						width: 48px;
						height: 48px;
						background: $xm-orange url('../img/index/小米.png') no-repeat 6px 6px;
						&:hover{
							// background: #000;
						}
					}
				}
				ul.col-8{
					position: inherit !important;
					
					li.pare{
						display: block;
						a{
							color:$xm-33;
							font-size:16px;
							&:hover{
								color:$xm-orange;
							}
						}
						.pare1{
								  display: none;
								  position: absolute;
								  border-top:1px solid #e0e0e0; 
								  left: 0;
								  background-color: #fff;
								  box-shadow:0px 5px 10px #e0e0e0;
								  width: 100%;
								  top:117px;
								  z-index: 1;
						}
						&:hover{
							.pare1{
								  display: flex;
								  justify-content: space-around;
								ul.dropdown-content{
										  list-style: none;
										  padding-left: 0px;
										  max-width: 1226px;
											display: flex;
											justify-content:space-around;
									li{
										text-align: center;
										padding-top: 30px;
										img{
											width: 100%;
										}
									}
								}
							}
						}
						
						
						
						// ul.dropdown-content{
						// 	  display: none;
						// 	  position: absolute;
						// 	  background-color: #ff00ff;
						// 	  min-width: 1900px;
						// 	  top:73px;
						// 	  left: -468px;
						// 	  padding: 12px 16px;
						// 	  z-index: 1;
						// 	  list-style: none;
						// 	  li{
						// 		  
						// 	  }
						// 	}
						// &:hover{
						// 	ul.dropdown-content{
						// 		display: flex;
						// 		justify-content: space-around;
						// 		max-width: 1224px;
						// 		
						// 	}
						// }
					}
				}
				.col-3{
					display: flex;
					justify-content: flex-end;
					input{
						border: 1px solid #e0e0e0;
						padding: 0;
						outline:none;
						
						&:hover{
							border: 1px solid $xm-orange;
						}
					}
					
					a{
						border: 1px solid #e0e0e0;
						border-left: none;
						width: 42px;
						height: 42px;
						background: url("../img/index/search.png") no-repeat 11px 11px;
						&:hover{
							border: 1px solid $xm-orange;
							background: $xm-orange url("../img/index/search_h.png") no-repeat 11px 11px;
						}
					}
				}
				#tab{
					z-index: 1;
					width: 100vw;
					left: 0px;
					display: none;
				}
				.tab-p{
					position: fixed;
					top: 67px;
					display: flex !important;
					background: #000;
					z-index: 1000;
				}
				
			}
		}
	}
	hr{
		margin: 0;
	}
}